import React, { forwardRef, useState } from 'react';
import './index.scss';

export interface LawEnforcementItem {
  /**
   * 部门名称
   */
  department: string;

  /**
   * 执法类型
   */
  type: string;

  /**
   * 数值
   */
  value: number;
}

export interface LawEnforcementProps {
  /**
   * 组件标题
   */
  title?: string;

  /**
   * 英文标题
   */
  englishTitle?: string;

  /**
   * 当日数据
   */
  dailyData?: LawEnforcementItem[];

  /**
   * 当月数据
   */
  monthlyData?: LawEnforcementItem[];

  /**
   * 中央图表图片
   */
  chartImage?: string;

  /**
   * 默认选中时间类型
   */
  defaultTimeType?: 'daily' | 'monthly';

  /**
   * 点击事件
   */
  onClick?: () => void;

  /**
   * 时间类型切换
   */
  onTimeTypeChange?: (type: 'daily' | 'monthly') => void;

  /**
   * 点击执法项
   */
  onItemClick?: (item: LawEnforcementItem) => void;

  /**
   * 自定义样式
   */
  style?: React.CSSProperties;

  /**
   * 自定义类名
   */
  className?: string;

  // 低代码平台相关属性
  __designMode?: string;
  componentId?: string;
  _componentName?: string;
  forwardRef?: any;
}

const LawEnforcement = forwardRef<HTMLDivElement, LawEnforcementProps>((props, ref) => {
  const {
    title = '执法管理',
    subtitle = 'Space Security',
    dailyData = [
      { department: '公安', type: '出动警力', value: 1000 },
      { department: '城管', type: '出动警力', value: 100 },
      { department: '交警', type: '出动警力', value: 100 },
      { department: '市场监管', type: '出动警力', value: 100 },
      { department: '城管', type: '流浪乞讨', value: 100 },
      { department: '城管', type: '流浪乞讨', value: 100 },
      { department: '市场监管', type: '执法巡查', value: 100 },
      { department: '市场监管', type: '广告检查', value: 100 }
    ],
    monthlyData = [
      { department: '公安', type: '出动警力', value: 30000 },
      { department: '城管', type: '出动警力', value: 3000 },
      { department: '交警', type: '出动警力', value: 3000 },
      { department: '市场监管', type: '出动警力', value: 3000 },
      { department: '城管', type: '流浪乞讨', value: 3000 },
      { department: '市场监管', type: '执法巡查', value: 3000 },
      { department: '市场监管', type: '广告检查', value: 3000 }
    ],
    chartImage = 'http://localhost:8085/static/images/chengzhanzhuanti/编组91.png',
    defaultTimeType = 'daily',
    tabs = [
      { id: '1', text: '当日', isActive: true },
      { id: '2', text: '当月', isActive: false }
    ],
    onClick,
    onTimeTypeChange,
    onItemClick,
    style = {},
    className = '',
    __designMode,
    componentId,
    _componentName,
    forwardRef: forwardRefProp,
    ...otherProps
  } = props;
  const componentStyle: React.CSSProperties = {
    width: '500px',
    height: '395px',
    ...style
  };
  const [activeTabIndex, setActiveTabIndex] = useState(0);
  const [activeTimeType, setActiveTimeType] = useState<'daily' | 'monthly'>(defaultTimeType);

  const handleClick = () => {
    onClick?.();
  };
  const handleTabClick = (tab, index) => {
    setActiveTabIndex(index)
  }
  const handleTimeTypeChange = (type: 'daily' | 'monthly') => {
    setActiveTimeType(type);
    onTimeTypeChange?.(type);
  };

  const handleItemClick = (item: LawEnforcementItem) => {
    onItemClick?.(item);
  };

  const componentClassName = [
    'hzdz-law-enforcement',
    className
  ].filter(Boolean).join(' ');

  // 获取当前显示的数据
  const currentData = activeTimeType === 'daily' ? dailyData : monthlyData;

  // 格式化数值显示
  const formatValue = (value: number): string => {
    return value.toLocaleString();
  };
  return (
    <div
      ref={ref}
      className={componentClassName}
      style={componentStyle}
      onClick={handleClick}
      data-component-id={componentId}
      data-component-name={_componentName}
      data-design-mode={__designMode}
      {...otherProps}
    >
      <div className="title-wrap" style={{backgroundImage: 'url(http://localhost:8085/static/images/zonghezhifa/title-bg.png)'}}>
        <div className="title-str">
          <div className="title">
            <div>{title}</div>
            <div className="sen-title">{title}</div>
          </div>
          <div className="subtitle">{subtitle}</div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="content-wrap">
        <div className="tab-selector">
          {tabs.map((tab, index) => (
            <div
              key={tab.id}
              className={`tab-item ${activeTabIndex === index ? 'isActive' : 'unActive'}`}
              onClick={() => handleTabClick(tab, index)}
            >
              {tab.text}
            </div>
          ))}
        </div>
        <div className="data-wrap" style={{backgroundImage: 'url(static/images/chengzhanzhuanti/zhifa-bg.png)'}}>
          {dailyData.map((item, index) => (
            <div className="data-item" style={{justifyContent: index % 2 === 0 ? 'start' : 'end'}}>
              <div className={`${index % 2 === 0 ? 'right-start' : 'left-start'}`} style={{backgroundImage: 'url(static/images/chengzhanzhuanti/zhifa-item-bg.png)'}} />
              <div className="item-wrap" style={{justifyContent: index % 2 === 0 ? 'start' : 'end'}}>
                <div className={`item-left ${index % 2 === 0 ? 'left' : 'right'}`}>
                  <div className="item-title">{item.department}</div>
                  <div className="item-str">{item.type}</div>
                </div>
                <div className={`item-value ${index % 2 === 0 ? 'right' : 'left'}`}>{item.value}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="bottom-line" />
    </div>
  );
});

LawEnforcement.displayName = 'LawEnforcement';

export default LawEnforcement;
